<template>
  <div class="sidebar">
    <q-tabs v-model="defaultExpandedNames">
      <q-tab-pane
        v-for="(item, index) in assets.menu"
        :key="index"
        :name="String(index)"
        :label="item.title"
        :disabled="item.type !== 'map' && !hasMap ? true : false"
      >
        <div
          v-for="component in item.components"
          :key="component.componentMeta.name"
          class="grid-stack-item component-item"
          :gs-w="component.componentMeta.w"
          :gs-h="component.componentMeta.h"
        >
          <!-- 拼接参数，拖拽布局需要 -->
          <span class="grid-stack-item-content"
            >{{ component.componentMeta.type }}-{{
              component.componentName
            }}</span
          >
          <span class="item-img">
            <img
              class="component-img"
              :title="component.componentName"
              :src="
                require(`@/designer/assets/images/${component.componentMeta.imgName}.png`)
              "
              alt=""
            />
            <div class="item-title">{{ component.componentMeta.title }}</div>
          </span>
        </div>
      </q-tab-pane>
    </q-tabs>
  </div>
</template>

<script>
export default {
  name: 'NavMenu',
};
</script>

<script setup>
import { useWorkbench, useDragon, useDocument } from '@/designer/hooks';
import { computed, ref } from '@vue/composition-api';

const workbench = useWorkbench();
const dragon = useDragon();
const document = useDocument();

const assets = computed(() => {
  return workbench.value.assets;
});

const hasMap = computed(() => {
  return document.value.map.value.props.mapId;
});

const defaultExpandedNames = ref(0);
</script>

<style lang="scss" scoped>
// .component-wrapper {
//   display: flex;
//   gap: 8px;
// }
.sidebar {
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0 4px 8px 0 #99999933;
  ::v-deep .q-tabs {
    .q-tabs__nav-wrap {
      padding: 0 16px;
    }
  }
}
.component-item {
  text-align: center;
  cursor: move;
  margin-bottom: 8px;
  position: relative;
  width: 184px;
  height: 138px;
  margin: 0 16px 16px 16px;
  position: relative;
  background-color: #f7f7fb;
  .grid-stack-item-content {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
  }
  .item-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    .component-img {
      width: calc(100% - 8px);
      height: 100px;
      padding: 4px 4px 0 4px;
      display: block;
    }
    .item-title {
      font-size: 12px;
      color: #1d2129;
      height: 34px;
      line-height: 34px;
      text-align: center;
    }
  }
}
</style>
